<template>
  <el-dialog :title="title" :visible.sync="visible" :width="width" :close-on-click-modal='false' class="bonus">
    <el-row>
      <el-form class="col-12" :model="formData" ref="formRef" :label-width="labelWidth"  :rules="rules" v-loading="formLoading" :close-on-click-modal="false">
        <el-form-item label="机构名称" prop="deptName">
          <el-input v-model="formData.deptName" autocomplete="off" placeholder="请输入机构名称" :disabled="moudelType == 'xs'" clearable></el-input>
        </el-form-item>
        <el-form-item label="机构全称" prop="deptFullName">
          <el-input v-model="formData.deptFullName" autocomplete="off" placeholder="请输入机构全称" :disabled="moudelType == 'xs'" clearable></el-input>
        </el-form-item>
        <el-form-item label="上级部门" :prop="type != 'addRoot' ? 'parentDeptId' : ''" > <!--新增根节点 不做验证--->

          <avue-input-tree
            ref="deptTreeRef"
            :dic="parentDeptNameTreeData"
            node-key="deptCode"
            size="small"
            :nodeClick="nodeClick"
            :disabled="selectTreeDisabled || moudelType == 'xs' "
            v-model="formData.parentDeptId"
            :props="{ label: 'name', value: 'id',disabled:true,children: 'children' }"
            placeholder="请选择"
            @change="onChange"
            style="width: 100%"

          />
        </el-form-item>
        <el-form-item label="机构编号" prop="deptCode">
          <el-input v-model="formData.deptCode" autocomplete="off" placeholder="请输入机构编号" clearable :disabled="deptCodeDisable"></el-input>
        </el-form-item>
        <el-form-item label="ECC机构编号" prop="eccCode">
          <el-input v-model="formData.eccDeptCode" autocomplete="off" placeholder="请输入ECC机构编号" clearable :disabled="type != 'addRoot' ? true : false"></el-input>
        </el-form-item>
        <el-form-item label="机构系数" prop="deptRatio" v-if="moudelType == 'xs'">
          <el-input v-model="formData.deptRatio" autocomplete="off" placeholder="请输入机构系数" clearable></el-input>
        </el-form-item>
        <el-form-item label="奖金基数" prop="bonusRatio"  v-if="moudelType == 'xs'">
          <el-input v-model="formData.bonusRatio" autocomplete="off" placeholder="请输入奖金基数" clearable></el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary"  @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addObj,putObj,getSubDeptCode,getDeptInfoById}  from '@/api/bonus/calculateorgconfig' ;
import selectTree from '@/views/bonusmanage/components/selectTree'
export default {
  name: "orgForm",
  components:{
    selectTree
  },
  props:{
    parentDeptNameTreeData:{
      type:Array,
      default: function () {
        return [];
      },
    },
    moudelType:{
      type:String,
      default:''
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data(){
    return{
      type:'add',
      formLoading:false,
      title:'新增',
      width:'50%',
      visible: false,
      labelWidth:'125px',
      formData: {},
      selectTreeDisabled:false,
      deptCodeDisable:false,
      rules: {
        deptName: [{ required: true, message: '请输入机构名称', trigger: 'blur' },],
        deptFullName: [{ required: true, message: '请输入机构全称', trigger: 'blur' }],
        deptCode: [{ required: true, message: '请输入机构编码', trigger: 'blur' }],
        eccDeptCode: [{ required: true, message: '请输入ECC机构编码', trigger: 'blur' }],
        parentDeptId: [{ required: true, message: '请选择上级部门', trigger: 'blur' }],
        deptRatio: [{ required: true, message: '请输入机构系数', trigger: 'blur' }],
        bonusRatio: [{ required: true, message: '请输入奖金基数', trigger: 'blur' }],
      },
      filterText: '',
    }
  },
  methods:{
    async init(type,parentData,deptId){
      this.type = type
      this.parentData = parentData ;
      if (type == 'edit'){
        let res = await getDeptInfoById(parentData.bonusDeptId)//获取详情
        this.formData = res.data.data;
        this.selectTreeDisabled = false ;
        this.deptCodeDisable = true ;
        this.title = '编辑'
      }else if(type == 'add' && parentData){//新增下级
        this.formData.eccDeptCode = parentData.eccDeptCode
        let res = await getSubDeptCode({eccDeptCode:parentData.eccDeptCode}) //机构编码
        this.formData.deptCode = res.data.data
        this.formData.parentDeptId = parentData.id
        this.formData.parentDeptName = parentData.name
        this.selectTreeDisabled = true ;
        this.deptCodeDisable = true ;
        this.title = '新增'
      }else if (type == 'addRoot'){ //新增根节点
        this.formData = {}
        this.formData.parentId = '0'
        this.formData.deptId = deptId
        this.selectTreeDisabled = true ;
        this.deptCodeDisable = false ;
        this.title = '新增'
      }
      this.visible = true ;
    },
    handleSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.formLoading = true ;
          if (this.type == 'add' || this.type == 'addRoot'){
            addObj(this.formData).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }else{
            putObj(this.formData).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }

        } else {
          return false;
        }
      });
    },
    handleCancel(refresh){
      this.visible = false ;
      this.formData = {} ;
      if (refresh){
        this.$emit('refresh')
      }
      this.$refs.formRef.resetFields() ;
    },
    nodeClick(item){
      this.formData.parentDeptName = item.name
    },
    onChange(){

    }
  }
}
</script>

<style scoped>

</style>
